<template>
  <smart-table
    :title="permissionTitle"
    :formList="permissionFormList"
    :selectUrl="permissionSelectUrl"
    :insertUrl="permissionInsertUrl"
    :updateUrl="permissionUpdateUrl"
    :deleteUrl="permissionDeleteUrl"
    :exportExcelUrl="permissionExportUrl"
    :importExcelUrl="permissionImportUrl"
    :tableColumns="permissionTableColumns"
    :formButtonCtl="permissionFormButtonCtl"
    :selectDataExtend="selectDataExtend"
    :formRules="permissionFormRules"
    :maxOptionButtonCount="7">
    <template slot="table-button" slot-scope="row">
      <el-button type="warning" icon="el-icon-connection" @click="showBindDialog(row.row)">绑定</el-button>
    </template>
    <template slot="dialog-custom-form">
      <el-dialog :visible.sync="bindDialogVisible" width="50%" center>
        <div class="title" slot="title">当前选中权限:{{ currentPermission.title }}</div>
        <el-transfer
          v-model="changeRouterList"
          filterable
          :data="routerList"
          :props="{
            key: 'id',
            label: 'name',
          }"
          :titles="['未绑定资源', '已绑定资源']"
          :button-texts="['解绑', '绑定']">
        </el-transfer>
        <div slot="footer" class="dialog-footer">
          <el-button type="default" @click="bindDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="bindRouter(currentPermission.id)">绑定</el-button>
        </div>
      </el-dialog>
    </template>
  </smart-table>
</template>

<script>
import { getTreeData } from '@/utils/tree'
export default {
  name: 'Permission',
  data() {
    return {
      //绑定弹窗
      bindDialogVisible: false,
      //当前权限
      currentPermission: {},
      //所有的路由列表
      routerList: [],
      //已绑定的路由列表
      currentRouterList: [],
      //变化后的路由列表
      changeRouterList: [],
      //主题
      permissionTitle: '权限',
      //表单列表
      permissionFormList: [
        {
          title: '权限名',
          name: 'name',
          type: 'input',
          hidden: {
            header: true,
          },
        },
        {
          title: '路由',
          name: 'path',
          type: 'input',
          hidden: {
            header: true,
          },
        },
        {
          title: '标题',
          name: 'title',
          type: 'input',
          hidden: {
            header: true,
          },
        },
        {
          title: '图标',
          name: 'icon',
          hidden: {
            header: true,
          },
        },
        {
          title: '组件',
          name: 'component',
          type: 'input',
          hidden: {
            header: true,
          },
        },
        {
          title: '排序',
          name: 'order',
          type: 'number',
          hidden: {
            header: true,
          },
        },
        {
          title: '重定向',
          name: 'redirect',
          type: 'input',
          hidden: {
            header: true,
          },
        },
        {
          title: '是否固定',
          name: 'affix',
          type: 'select',
          showValue: false,
          tagStyle: {},
          tipMap: {},
          filters: [],
          hidden: {
            header: true,
          },
        },
        {
          title: '是否隐藏',
          name: 'hidden',
          type: 'select',
          tagStyle: {},
          tipMap: {},
          filters: [],
          showValue: false,
          hidden: {
            header: true,
          },
        },
        {
          title: '备注',
          name: 'note',
          type: 'textarea',
          hidden: {
            header: true,
          },
        },
        {
          title: '父组件',
          name: 'parentId',
          optionList: [],
          value: 'id',
          label: 'title',
          children: 'children',
          emitPath: false,
          checkStrictly: true,
          expandTrigger: 'hover',
          width: 80,
          type: 'tree',
          hidden: {
            header: true,
          },
        },
      ],
      //权限查询路径
      permissionSelectUrl: 'permission/lookAllPermission',
      //权限新增路径
      permissionInsertUrl: 'permission/insertOnePermission',
      //权限更新路径
      permissionUpdateUrl: 'permission/updateOnePermission',
      //权限删除路径
      permissionDeleteUrl: 'permission/deletePermissions',
      //权限导出路径
      permissionExportUrl: '/userService/per/export',
      //权限导入路径
      permissionImportUrl: '/userService/per/import',
      //表格列
      permissionTableColumns: [
        {
          title: '标题',
          name: 'title',
          width: 110,
        },
        {
          title: '权限名',
          name: 'name',
          width: 110,
        },
        {
          title: '路由',
          name: 'path',
          width: 110,
        },
        {
          title: '排序',
          name: 'order',
          width: 90,
        },

        {
          title: '图标',
          name: 'icon',
          type: 'icon',
          width: 110,
        },
        {
          title: '组件',
          name: 'component',
          width: 110,
        },
        {
          title: '重定向',
          name: 'redirect',
          width: 110,
        },
        {
          title: '是否固定',
          name: 'affix',
          type: 'tag',
          filters: [],
          width: 120,
        },
        {
          title: '是否隐藏',
          name: 'hidden',
          type: 'tag',
          filters: [],
          width: 120,
        },
        {
          title: '备注',
          name: 'note',
          width: 120,
        },
        {
          title: '创建时间',
          name: 'createTime',
          width: 180,
        },
        {
          title: '修改时间',
          name: 'updateTime',
          width: 180,
        },
      ],
      //表单按钮控制
      permissionFormButtonCtl: {
        detailButton: false,
        pagination: false,
        selectButton: false,
      },
      permissionFormRules: {
        path: [
          {
            required: true,
            message: '路由不得为空!',
            trigger: 'blur',
          },
        ],
        title: [
          {
            required: true,
            message: '标题不得为空!',
            trigger: 'blur',
          },
        ],
        component: [
          {
            required: true,
            message: '组件不得为空!',
            trigger: 'blur',
          },
        ],
        affix: [
          {
            required: true,
            message: '请选择是否固定!',
            trigger: 'change',
          },
        ],
        hidden: [
          {
            required: true,
            message: '请选择隐藏属性!',
            trigger: 'change',
          },
        ],
      },
      //是否固定
      affixMap: {
        style: {
          false: 'danger',
          true: 'success',
        },
        tip: {
          false: '否',
          true: '是',
        },
        filters: [
          {
            title: '否',
            name: false,
          },
          {
            title: '是',
            name: true,
          },
        ],
      },
      //是否隐藏
      hiddenMap: {
        style: {
          false: 'danger',
          true: 'success',
        },
        tip: {
          false: '否',
          true: '是',
        },
        filters: [
          {
            title: '否',
            name: false,
          },
          {
            title: '是',
            name: true,
          },
        ],
      },
    }
  },
  mounted() {
    this.addConfig()
  },
  methods: {
    //合并属性
    addConfig() {
      // 是否固定
      this.$set(this.permissionFormList[7], 'optionList', this.affixMap.filters)
      this.$set(this.permissionTableColumns[7], 'tagStyle', this.affixMap.style)
      this.$set(this.permissionTableColumns[7], 'tipMap', this.affixMap.tip)
      this.$set(this.permissionTableColumns[7], 'filters', this.affixMap.filters)

      // 是否隐藏
      this.$set(this.permissionFormList[8], 'optionList', this.hiddenMap.filters)
      this.$set(this.permissionTableColumns[8], 'tagStyle', this.hiddenMap.style)
      this.$set(this.permissionTableColumns[8], 'tipMap', this.hiddenMap.tip)
      this.$set(this.permissionTableColumns[8], 'filters', this.hiddenMap.filters)
    },
    //显示绑定弹窗
    showBindDialog(item) {
      this.bindDialogVisible = true
      this.currentPermission = item
      this.initBindDialog(item)
    },
    //获取权限树
    selectDataExtend(data) {
      this.permissionFormList[10].optionList = getTreeData(data, 'children')
      return data
    },
    //初始化绑定弹窗
    initBindDialog(item) {
      //获取所有路由
      this.$store.dispatch('router/lookAllRouter').then((response) => {
        this.routerList = response
      })
      //获取当前权限绑定的路由列表
      this.$store
        .dispatch('router/lookRouterByPermission', item.id)
        .then((response) => {
          //当前路由数据
          this.currentRouterList = response.data
          //复制列表数据
          this.changeRouterList = response.data
        })
        .catch((error) => {
          this.changeRouterList = []
        })
    },
    //绑定路由
    bindRouter(id) {
      //新的列表
      var newRouter = this.changeRouterList
      //旧的列表
      var oldRouter = this.currentRouterList
      //新增的列表
      var addList = newRouter.filter((v) => !oldRouter.includes(v))
      //新增的列表
      var deleteList = oldRouter.filter((v) => !newRouter.includes(v))
      //新增列表
      if (addList.length > 0) {
        //映射条件
        var addMap = {}
        addMap[id] = addList
        this.$store.dispatch('permission/bindRouter', addMap).then((response) => {
          if (response.success) {
            this.$message({
              type: 'success',
              message: '绑定资源成功!',
              showClose: true,
            })
          }
        })
      }
      //删除列表
      if (deleteList.length > 0) {
        //映射条件
        var deleteMap = {}
        deleteMap[id] = deleteList
        this.$store.dispatch('permission/unbindRouter', deleteMap).then((response) => {
          if (response.success) {
            this.$message({
              type: 'success',
              message: '解绑资源成功!',
              showClose: true,
            })
          }
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .title {
  text-align: center;
  font-size: large;
  color: red;
}
.el-transfer {
  margin: auto;
}
</style>
